<template>
  <view>
    <u-navbar
      title="我的积分"
      title-color="#fff"
      :border-bottom="false"
      :back-icon-color="navbarStyle.iconColor"
      :immersive="true"
      :background="navbarStyle.backgroundColor"
    ></u-navbar>
    <view class="head-page">
      <view class="head">
        <view class="head-item">
          <view class="coin-num">{{ credit }}</view>
          <image src="@/pageUser/static/images/integral_big_icon.png" class="coin-img"></image>
          <image
            src="@/pageUser/static/images/signin_botton.png"
            class="signin"
            v-if="today_punch_in == 0"
            @click="signin"
          ></image>
          <image src="@/pageUser/static/images/signin_botton_dis.png" class="signin" v-else></image>
        </view>
      </view>
      <view class="coin-item">
        <view class="coin-text">积分获取</view>
        <view class="coin-box">
          <view class="coin-msg">
            <image class="left-img" src="@/pageUser/static/images/integral_buy_icon.png"></image>
            <view class="center">购买课程</view>
            <view class="right" @click="toLink('buy')">去购买</view>
          </view>
          <view class="coin-msg">
            <image
              class="left-img"
              src="@/pageUser/static/images/integral_comment_icon.png"
            ></image>
            <view class="center">评论课程</view>
            <view class="right" @click="toLink('talk')">去评论</view>
          </view>
          <view class="coin-msg">
            <image class="left-img" src="@/pageUser/static/images/integral_share_icon.png"></image>
            <view class="center">分享课程</view>
            <view class="right" @click="toLink('share')">去分享</view>
          </view>
        </view>
      </view>
    </view>

    <view class="coin-scroll">
      <edu-mescroll-body
        bottom="0"
        :bottombar="false"
        @init="mescrollInit"
        @down="refresh"
        @up="getList"
      >
        <view class="coin-detail">
          <view class="coin-title">积分明细</view>
          <view class="coin">
            <view class="list" v-for="(item, index) in list" :key="index">
              <view class="list-left">
                <view class="list-source u-line-1">{{ item.note }}</view>
                <view class="list-time">{{ item.create_time | timeFormat }}</view>
              </view>
              <image src="@/pageUser/static/images/integral_big_icon.png" class="list-img"></image>
              <view class="list-right u-line-1" v-if="item.alter_type == 0">-{{ item.num }}</view>
              <view class="list-right u-line-1" v-else>+{{ item.num }}</view>
            </view>
          </view>
        </view>
      </edu-mescroll-body>
    </view>

    <!-- 弹窗部分 -->
    <u-popup v-model="showTalk" border-radius="14" mode="center" height="728" width="540">
      <view class="talk">
        <view class="talk-tips">第一步：进入课程详情页，切换至“评论”</view>
        <view class="talk-tips">第二步：点击“评论”按钮，进入评论页</view>
        <image src="@/pageUser/static/images/popup_comment_img.png" class="talk-img"></image>
        <view class="talk-btn" @click="closePopup">知道了</view>
      </view>
    </u-popup>
    <u-popup v-model="showShare" border-radius="14" mode="center" height="808" width="540">
      <view class="share">
        <scroll-view scroll-y="true" style="height: 728rpx">
          <view class="share-tips">第一步：进入课程详情页，点击右上角分享按钮进入分享页面</view>
          <image src="@/pageUser/static/images/popup_share_img.png" class="share-img"></image>
          <view class="share-tips" style="margin-top: 20rpx"
            >第二步：选择分享方式，分享完成即可</view
          >
          <image src="@/pageUser/static/images/popup_share_img2.png" class="share-img"></image>

          <view class="share-btn" @click="closePopup">知道了</view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navbarStyle: {
        iconColor: '#ffffff',
        backgroundColor: {
          backgroundColor: 'transparent',
        },
      },
      showTalk: false,
      showShare: false,
      credit: 0,
      list: [],
      today_punch_in: '',
    }
  },
  onPageScroll(e) {
    this.pageScroll(e)
  },
  methods: {
    signin() {
      this.$edu.api.getCoinPunchIn().then((res) => {
        var page = {
          num: 0,
          size: 10,
          time: null,
        }
        this.list = []
        this.getList(page)
      })
    },
    //导航栏渐变
    pageScroll(e) {
      let color = '#ffffff'
      let fontColor = '#ffffff'
      let opacity = 0
      let tmpY = 180
      if (e.scrollTop && e.scrollTop > 80) {
        if (e.scrollTop > tmpY) {
          opacity = 1
          fontColor = '#303133'
        } else {
          opacity = (e.scrollTop - 80) / 100
        }
      } else {
        opacity = 0
        fontColor = '#ffffff'
      }
      let rgbaBg = this.$u.colorToRgba(color, opacity)
      this.navbarStyle.backgroundColor = {
        backgroundColor: rgbaBg,
      }
      this.navbarStyle.iconColor = fontColor
    },
    refresh() {
      this.mescroll.resetUpScroll()
    },
    getList(page) {
      this.$edu.api
        .getUserCredit({
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          this.credit = data.credit
          this.today_punch_in = data.today_punch_in
          if (page.num == 1) this.list = []
          this.list = this.list.concat(data.flow.data)
          this.mescroll.endBySize(data.flow.data.length, data.flow.total)
        })
    },
    toLink(type) {
      if (type == 'talk') {
        this.showTalk = true
      } else if (type == 'share') {
        this.showShare = true
      } else if (type == 'buy') {
        uni.switchTab({
          url: '/pages/course/index',
        })
      }
    },
    closePopup() {
      this.showTalk = false
      this.showShare = false
    },
  },
}
</script>

<style lang="scss" scoped>
.head-page {
  width: 100%;
  height: 864rpx;
  background-color: #f7f7f7;
  position: relative;
  overflow: hidden;
  .head {
    height: 460rpx;
    width: 100%;
    @include bg-color();
    position: absolute;
    background-image: url('@/pageUser/static/images/integral_top_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    .head-item {
      height: 110rpx;
      width: 100%;
      margin-top: 150rpx;
      .coin-num {
        font-size: 80rpx;
        color: #ffffff;
        line-height: 110rpx;
        float: left;
        margin-left: 76rpx;
        font-weight: bold;
      }
      .coin-img {
        height: 70rpx;
        width: 70rpx;
        float: left;
        margin-left: 8rpx;
        display: block;
        margin-top: 20rpx;
      }
      .signin {
        height: 110rpx;
        width: 230rpx;
        float: right;
        margin-right: 15rpx;
      }
    }
  }
  .coin-item {
    height: 560rpx;
    width: 690rpx;
    position: absolute;
    top: 300rpx;
    left: calc(50% - 345rpx);
    border-radius: 20rpx;
    overflow: hidden;
    background-image: url('@/pageUser/static/images/integral_center_bg.png');

    background-repeat: no-repeat;
    background-size: 100% 100%;
    .coin-text {
      font-size: 32rpx;
      color: #755211;
      height: 92rpx;
      line-height: 92rpx;
      margin-left: 46rpx;
      font-weight: bold;
    }
    .coin-box {
      height: 440rpx;
      width: 660rpx;
      margin: 0 auto;
      background-color: #ffffff;
      border-radius: 20rpx;
      overflow: hidden;
      .coin-msg {
        height: 146rpx;
        width: 100%;
        overflow: hidden;
        .left-img {
          height: 72rpx;
          width: 72rpx;
          display: block;
          float: left;
          margin-top: 37rpx;
          margin-left: 35rpx;
          margin-right: 24rpx;
        }
        .center {
          height: 88rpx;
          width: 55%;
          float: left;
          overflow: hidden;
          margin-top: 29rpx;
          line-height: 88rpx;
          font-size: 32rpx;
          color: #303133;
          font-weight: bold;
        }
        .right {
          height: 64rpx;
          width: 150rpx;
          border-radius: 32rpx;
          background: linear-gradient(180deg, #ffbb8c 0%, #ff7a26 100%);
          box-shadow: 0px 2px 12px 0px rgba(248, 125, 61, 0.5);
          float: right;
          margin-right: 16rpx;
          margin-top: 41rpx;
          text-align: center;
          line-height: 64rpx;
          color: #ffffff;
          letter-spacing: 2rpx;
        }
      }
    }
  }
}

.coin-scroll {
  height: calc(100vh - 864rpx);
}
.coin-detail {
  width: 690rpx;
  // height: 1000rpx;
  margin: 24rpx auto 0;
  border-radius: 30rpx;
  background-color: #ffffff;
  overflow: hidden;
  .coin-title {
    color: #303133;
    font-size: 30rpx;
    font-weight: bold;
    height: 82rpx;
    line-height: 84rpx;
    margin-left: 44rpx;
    border-bottom: 1px solid #f7f7f7;
  }
  .coin {
    height: auto;
    padding-left: 45rpx;
    padding-right: 45rpx;

    .list {
      height: 151rpx;
      width: 100%;
      border-bottom: 1px solid #f7f7f7;
      .list-left {
        height: 100%;
        width: 70%;
        float: left;
        overflow: hidden;
        .list-source {
          height: 42rpx;
          margin-top: 33rpx;
          line-height: 42rpx;
          font-size: 30rpx;
          color: #303133;
        }
        .list-time {
          height: 75rpx;
          color: #909399;
          font-size: 24rpx;
        }
      }
      .list-img {
        height: 26rpx;
        width: 26rpx;
        float: right;
        display: block;
        margin-top: 62rpx;
      }
      .list-right {
        text-align: right;
        width: 22%;
        height: 100%;
        line-height: 151rpx;
        font-size: 30rpx;
        color: #ff8a52;
        margin-right: 8rpx;
        float: right;
        font-weight: bold;
      }
    }
  }
}
.talk {
  padding: 40rpx 30rpx;
  .talk-tips {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #303133;
  }
  .talk-img {
    height: 436rpx;
    width: 480rpx;
    margin-top: 20rpx;
  }
  .talk-btn {
    height: 72rpx;
    width: 270rpx;
    border-radius: 44rpx;
    background-color: #ff8a52;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
    font-size: 36rpx;
    margin: 30rpx auto 0;
  }
}

.share {
  padding: 40rpx 30rpx;
  .share-tips {
    min-height: 40rpx;
    max-height: 80rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    color: #303133;
  }
  .share-img {
    height: 368rpx;
    width: 480rpx;
    display: block;
    margin-top: 20rpx;
  }
  .share-btn {
    height: 72rpx;
    width: 270rpx;
    border-radius: 44rpx;
    background-color: #ff8a52;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
    font-size: 36rpx;
    margin: 30rpx auto 0;
  }
}
</style>
